<template>
  <div class="toolbar colorMain">
    <div class="mt-10 mb-10">
      <el-form :inline="true" size="small">
        <el-form-item label="用户ID:"><el-input v-model="queryFrom.user_id" type="textarea" autosize/></el-form-item>
        <el-form-item label="活跃时间"><date-picker v-model="queryFrom.time_range"/></el-form-item>
        <el-form-item label="注册时间"><date-picker v-model="queryFrom.registered_time_range"/></el-form-item>
        <!-- <el-form-item label="时段类型" ><time-interval v-model="queryFrom.interval_type"/></el-form-item> -->
        <!-- <el-form-item label="盈利类型" ><interest-list v-model="queryFrom.interest_in"/></el-form-item> -->
        <el-form-item label="游戏类型" size="small">
          <div v-if="['witch', 'loki'].includes($store.state.user.business)">
            <el-select v-model="queryFrom.game_type" placeholder="请选择" @visible-change="viChange">
              <el-option v-for="(value, key) of chooseOptions" :key="key" :label="value.label" :value="value.value"/>
            </el-select>
          </div>
          <select-all v-else :all-select-list="chooseOptions" v-model="queryFrom.game_type" />
        </el-form-item>
        <el-form-item label="玩法" size="small">
          <select-all :all-select-list="options" v-model="queryFrom.game_id_list" />
        </el-form-item>
        <el-form-item label="渠道筛选" ><channel v-model="queryFrom.channel"/></el-form-item>
        <el-form-item v-if="showSearch" label="盈利金额:" ><span style="color: blue;cursor: pointer" @click="clickTurn">(点击切换) </span><el-input v-model="queryFrom.profit_amount_min" placeholder="下限" style="width:100px;"/><span>-</span><el-input v-model="queryFrom.profit_amount_max" placeholder="上限" style="width:100px;"/></el-form-item>
        <el-form-item v-if="!showSearch" label="投注金额:" ><span style="color: blue;cursor: pointer" @click="clickTurn">(点击切换) </span><el-input v-model="queryFrom.amount_min" placeholder="下限" style="width:100px;"/><span>-</span><el-input v-model="queryFrom.amount_max" placeholder="上限" style="width:100px;"/></el-form-item>
        <el-form-item label="展示纬度" >
          <el-switch v-model.number="queryFrom.display_dimension" :active-value="1" :inactive-value="0" :disabled="queryFrom.user_id?false:true" active-text="单日展示" inactive-text="汇总展示" />
        </el-form-item>
        <el-button size="small" type="primary" @click="sendQuery">查询</el-button>
        <el-button size="small" type="success" @click="resetForm">重置</el-button>
      </el-form>
    </div>
    <div><el-button :loading="excelLoad" icon="el-icon-printer" style="float: right;margin: 0 0 10px 0" size="mini" type="success" @click="downExcel" >导出数据</el-button></div>
    <tree-table :table-data="tableData" :key_mapper="key_mapper" :sortable = "['_user_id', 'chn', 'game_name', 'room_name']" :min-width = "146" size="small" @prarent-sort-change="sortChange"/>
    <el-pagination :current-page.sync="page" :page-size="size" :total.sync="total" class="mt-10" layout="total, sizes, prev, pager, next, jumper" @current-change="currentChange" @size-change="handleSizeChange"/>
  </div>
</template>
<script>
import { pickTime1, pickTimeLast } from '@/model/DateRange'
import { getAnalysis, getDwcGameType } from '@/api/table'
import mixins from '@/model/mixins'
import TreeTable from '@/components/AnalyseTable/TreeTable'

const lotteryType = ['witch', 'loki']
export default {
  components:{ TreeTable },
  name: 'Play',
  mixins: [mixins],
  provide () {
    return {
      parent: this
    }
  },
  data() {
    return {
      queryFrom: {
        // interest_in: 'bet',
        game_id_list: [],
        game_type: [],
        channel: [],
        time_range: pickTime1,
        registered_time_range: pickTimeLast,
        sort_by: '-choushui'
      },
      API: getAnalysis,
      chooseOptions: [],
      options: [],
      showSearch: true
    }
  },
  watch: {
    'queryFrom.game_type': function() {
      if (lotteryType.includes(this.$store.state.user.business)) {
        if (this.queryFrom.game_type) {
          this.options = this.chooseOptions.filter(item => {
            return (item.value === this.queryFrom.game_type)
          })[0].child
        }
      } else {
        if (this.queryFrom.game_type.length === 1) {
          this.options = this.chooseOptions.filter(item => {
            return (item.value === this.queryFrom.game_type[0])
          })[0].child
        } else {
          this.options = []
          this.queryFrom.game_id_list = []
        }
      }
      // console.log(this.options)
      // console.log(ObjLable[this.$store.state.user.business])
    },
    'queryFrom.user_id':function(){
      if(!this.queryFrom.user_id){
        this.queryFrom.display_dimension=0;
        delete this.queryFrom.user_id
      }
    },
    'queryFrom.display_dimension':function() {
      if(this.queryFrom.display_dimension===1&&this.queryFrom.user_id){
        this.queryFrom.sort_by='-day'
      }else{
        this.queryFrom.sort_by='-choushui'
      }
    }
  },
  created() {
    this.getDwcGameType()
  },
  methods: {
    change() {
      this.queryFrom.game_id_list = []
    },
    viChange() {
      this.queryFrom.game_id_list = []
    },
    getDwcGameType() {
      getDwcGameType().then(res => {
        if (res.status === 0) {
          // 数组第一层更改键
          this.goodObj = res.data.preset.map(function(item) {
            return {
              value: item.key,
              label: item.name,
              child: item.third_type
            }
          })
          // 数组第一层加键值对 二层改键/加键值对
          this.goodObj.map(function(item) {
            item['name'] = '全选/取消'
            item['CName'] = item.label
            item.child.map(function(item1) {
              item1['value'] = item1.key
              delete item1.key
              item1['CName'] = item1.name
              delete item1.name
              item1['name'] = '全选/取消'
            })
          })
          this.chooseOptions = this.goodObj
        }
      })
    },
    clickTurn() {
      this.showSearch = !this.showSearch
      this.queryFrom.profit_amount_min = ''
      this.queryFrom.profit_amount_max = ''
      this.queryFrom.amount_min = ''
      this.queryFrom.amount_max = ''
    },
    resetForm() {
      this.queryFrom = {
        game_id_list: [],
        game_type: [],
        channel: [],
        time_range: pickTime1,
        registered_time_range: pickTimeLast,
        sort_by: '-choushui'
      }
      this.sendQuery()
    }
  }
}
</script>
